একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।
সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।
| এই এলিমেন্টটিতে 50px মার্জিন ব্যবহার করা হয়েছে। |
একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
লিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-
margin-topmargin-rightmargin-bottommargin-leftএই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ
auto - ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।inherit - প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।নিচের উদাহরণে < p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid blue;
margin-top: 80px;
margin-bottom: 110px;
margin-right: 130px;
margin-left: 100px;
background-color: #0099aa;
padding:8px;
}
</style>
</head>
<body>
<div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>
</body>
</html>কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।
নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ
margin-topmargin-rightmargin-bottommargin-left
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid blue;
margin: 80px 130px 110px 100px;
background-color: #0099aa;
padding:8px;
}
</style>
</head>
<body>
<div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px, এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>
</body>
</html>
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ
একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।
এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
width:320px;
margin: auto;
border: 2px solid teal;
padding: 8px;
}
</style>
</head>
<body>
<h2>auto ভ্যালুর ব্যবহার</h2>
<div>এই div টিতে margin: auto; সেট করা হয়েছে।</div>
</body>
</html>নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে <p> এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.main {
border: 2px solid teal;
margin-left: 180px;
}
p.child {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>inherit ভ্যালুর ব্যবহার</h2>
<div class="main">
<p class="child">এই এলিমেন্টের বাম পাশের মার্জিন প্যারেন্ট এলিমেন্ট থেকে এসেছে।</p>
</div>
</body>
</html>এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।
এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।
নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1 {
margin: 0 0 60px 0;
}
h2 {
margin: 40px 0 0 0;
}
</style>
</head>
<body>
<p>মার্জিন কলাপ্সের</p>
<h1>স্যাট একাডেমি</h1>
<h2>স্যাট একাডেমি</h2>
</body>
</html>এই উদাহরণটিতে < h1> এলিমেন্টের নিচে 60px এবং < h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।
উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, < h1> এবং < h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
